<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
    <head>
        <title>Home</title>

        <ui:include src="master/library.xhtml"></ui:include>

        <style>
            .menu{
                display: block;
            }
        </style>
    </head>
    <body onload="selected()">
        <!--==============================header=================================-->
        <ui:include src="master/slide.xhtml"></ui:include>
        <!--===========================content================================-->
        <div id="content">
            <div class="banner">
                <div class="container_12">
                    <div class="grid_12">
                        <div class="welc_block">
                            <h2 class="size1">Welcome!</h2>
                            <h5>Lorem ipsum dolor sit amet, consectetur adipisc ing elit In commodo libero.</h5>
                            <a href="#" class="link">more info</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bg1 p102">
                <div style="border: 0px solid black;margin-top: -100px;padding-left: 200px;">
                    <h3>The Event New</h3>

                </div>
                <hr style="margin-top: -35px;width: 950px;"/>

                <div class="container_12">

                    <c:choose>
                        <c:when test="#{getEventLibrary.list !=null}">
                            <c:forEach items="#{getEventLibrary.list}" var="ev">

                                <div class="grid_3 wrap">

                                    <div class="thumb">
                                        <!--                                        <div class="image"><img src="images/page1_img1.png" alt=""/></div>-->
                                        <div class="circle"><i class="fa fa-lightbulb-o"></i></div>
                                        <h4>#{ev.name}</h4>
                                        <h6><a href="#" class="link1">#{ev.name}</a></h6>
                                        <a>
                                            #{ev.description}
                                        </a>
                                        <div>
                                            <span style="font-size: 12px;color: #9197a3;"> Start :#{ev.timeStart}<br/>
                                                End   :#{ev.timeEnd}
                                            </span>
                                        </div>

                                        <a href="#" class="link">more info</a>
                                    </div>
                                </div>
                            </c:forEach>

                        </c:when>
                        <c:otherwise>
                            <h3>Null Event library</h3>
                        </c:otherwise>
                    </c:choose>

                    <!--                    <div class="grid_3 wrap">
                                            <div class="thumb">
                                                <div class="image"><img src="images/page1_img2.png" alt=""/></div>
                                                <h4>Networking</h4>
                                                <h6><a href="#" class="link1">Mes cuml dia sed cet inger lot.</a></h6>
                                                <p>Nam justo ante, hendrerit vitae aliquet condimentum, commodo eu mi. Etiam sol licitudin odio at. </p>
                                                <a href="#" class="link">more info</a>
                                            </div>
                                        </div>-->
                    <!--                    <div class="grid_3 wrap">
                                            <div class="thumb">
                                                <div class="image"><img src="images/page1_img3.png" alt=""/></div>
                                                <h4>INNOVATION</h4>
                                                <h6><a href="#" class="link1">Mes cuml dia sed cet inger lot.</a></h6>
                                                <p>Nam justo ante, hendrerit vitae aliquet condimentum, commodo eu mi. Etiam sol licitudin odio at. </p>
                                                <a href="#" class="link">more info</a>
                                            </div>
                                        </div>
                                        <div class="grid_3">
                                            <div class="thumb">
                                                <div class="image"><img src="images/page1_img4.png" alt=""/></div>
                                                <h4>DEVELOPMENT</h4>
                                                <h6><a href="#" class="link1">Mes cuml dia sed cet inger lot.</a></h6>
                                                <p>Nam justo ante, hendrerit vitae aliquet condimentum, commodo eu mi. Etiam sol licitudin odio at. </p>
                                                <a href="#" class="link">more info</a>
                                            </div>
                                        </div>                                             -->
                </div>
            </div>
            <div class="p96">
                <div class="container_12">
                    <div class="grid_6 wrap">
                        <div class="block">
                            <h3>Our <br/><span>services</span></h3>
                            <h6><a href="#">Mes cuml dia sed ineniasinge dolor ipsum commete ipsum comnetus.</a></h6>
                            <p>Dolor nunc vule putateulr ips dol consec.Donec semp ertet laciniate ultricie upien disse comete dolo lectus fgilla itollicil tua ludin dolor nec met quam accumsan dolore. Condime netus lullam utlacus adipiscing ipsum molestie euismod estibulum vel libero.</p>
                            <div class="grid_3 alpha">
                                <ul class="list mt">
                                    <li><a href="#"><i class="fa fa-angle-right"></i>COMPUTER SUPPORT</a></li>
                                    <li><a href="#"><i class="fa fa-angle-right"></i>IT SYSTEMS</a></li>
                                    <li><a href="#"><i class="fa fa-angle-right"></i>REMOTE ACCESS</a></li>
                                    <li><a href="#"><i class="fa fa-angle-right"></i>REMOTE DESKTOP</a></li>
                                </ul>
                            </div>
                            <div class="grid_3 omega">
                                <ul class="list mt">
                                    <li><a href="#"><i class="fa fa-angle-right"></i>BLACKBERRY MOBILE</a></li>
                                    <li><a href="#"><i class="fa fa-angle-right"></i>IT CONSULTANCY</a></li>
                                    <li><a href="#"><i class="fa fa-angle-right"></i>HOSTED EXCHANGE</a></li>
                                    <li><a href="#"><i class="fa fa-angle-right"></i>Data Warehousing</a></li>
                                </ul>                    
                            </div>                        
                        </div>
                    </div>
                    <div class="grid_6">
                        <div class="block">
                            <h3>Shortly <br/><span>about us</span></h3>
                            <div class="img"><img src="images/page1_img5.jpg" alt=""/></div>
                            <h6><a href="#">Mes cuml dia sed ineniasin dolore ipsum commete ipsum com ipsum.</a></h6>
                            <p>Dolor nunc vule putateulr ips donec semp ertet laciniate ultricie upien disse comete dolo lectus fgilla itollicil tua ludin dolor nec met quam ipsum accumsan dolore condime netu lullam utlacus adipiscing ipsum molestie euismod estibulum vel libero ipsum sit amet sollicitudin ante. </p>
                        </div>                                         
                    </div>                                         
                </div>     
            </div>
            <div class="container_12">
                <div class="grid_12">
                    <div class="divider"></div>
                </div>
            </div>
            <div class="p96">
                <div class="container_12">
                    <div class="grid_12">
                        <h3>featured <br/><span>news</span></h3>
                        <div id="owl" class="owl-carousel owl-theme" style="opacity: 1; display: block;">
                            <div class="owl-wrapper-outer"><div class="owl-wrapper" style="width: 3130px; left: -313px; display: block;"><div class="owl-item" style="width: 313px;"><div class="item">
                                            <time datetime="2014-01-01">01<span>may</span></time>
                                            <div class="pl">
                                                <h5>Donec facilisi ulet</h5>
                                                <h6><a href="#">Lorem Ipsum dolore</a></h6>
                                                <p>Morbi tempor quam massadipu iscing ut curs congue pentesq.</p>
                                            </div>
                                        </div></div><div class="owl-item" style="width: 313px;"><div class="item">
                                            <time datetime="2014-01-01">02<span>may</span></time>
                                            <div class="pl">
                                                <h5>Donec facilisi ulet</h5>
                                                <h6><a href="#">Lorem Ipsum dolore</a></h6>
                                                <p>Morbi tempor quam massadipu iscing ut curs congue pentesq.</p>
                                            </div>
                                        </div></div><div class="owl-item" style="width: 313px;"><div class="item">
                                            <time datetime="2014-01-01">03<span>may</span></time>
                                            <div class="pl">
                                                <h5>Donec facilisi ulet</h5>
                                                <h6><a href="#">Lorem Ipsum dolore</a></h6>
                                                <p>Morbi tempor quam massadipu iscing ut curs congue pentesq.</p>
                                            </div>
                                        </div></div><div class="owl-item" style="width: 313px;"><div class="item">
                                            <time datetime="2014-01-01">04<span>may</span></time>
                                            <div class="pl">
                                                <h5>Donec facilisi ulet</h5>
                                                <h6><a href="#">Lorem Ipsum dolore</a></h6>
                                                <p>Morbi tempor quam massadipu iscing ut curs congue pentesq.</p>
                                            </div>
                                        </div></div><div class="owl-item" style="width: 313px;"><div class="item">
                                            <time datetime="2014-01-01">05<span>may</span></time>
                                            <div class="pl">
                                                <h5>Donec facilisi ulet</h5>
                                                <h6><a href="#">Lorem Ipsum dolore</a></h6>
                                                <p>Morbi tempor quam massadipu iscing ut curs congue pentesq.</p>
                                            </div>
                                        </div></div></div></div>




                            <div class="owl-controls clickable"><div class="owl-buttons"><div class="owl-prev">prev</div><div class="owl-next">next</div></div></div></div>
                    </div>            
                </div>            
            </div>
            <div class="bg2 p35">
                <div class="container_12">
                    <div class="sub_form">
                        <div class="grid_5">
                            <i class="fa fa-envelope-o"></i>
                            <h5>Subscribe to our Newsletter</h5>
                        </div>
                        <form id="subscribe-form" class="clearfix">
                            <div class="grid_5">
                                <div class="success" style="display: none;">Your subscription request<br/> has been sent!</div>
                                <fieldset>
                                    <label class="email">
                                        <input type="email" value="your email address"/>
                                        <span class="error">*This is not a valid email address.</span>
                                    </label>
                                </fieldset> 
                            </div>
                            <div class="grid_2">
                                <a href="#" data-type="submit" class="link">submit</a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>        
        </div>
        <!--==============================footer=================================-->
        <ui:include src="master/footer.xhtml"></ui:include>

        <script type="text/javascript">
            function selected() {
                $('#home').addClass('current');
                $('#menuslide').style('style="display:block;"');
            }
        </script>
    </body>
</html>
